import { Editor } from '@tiptap/core'
import { useEffect, useState } from 'react'

function useForceUpdate() {
  const [, setValue] = useState(0)

  return () => setValue((value) => value + 1)
}

// This is a component that is similar to https://github.com/ueberdosis/tiptap/blob/main/packages/react/src/useEditor.ts
// Use it to rerender a component whenever a transaction happens in the editor
const useEditorForceUpdate = (editor: Editor) => {
  const forceUpdate = useForceUpdate()

  useEffect(() => {
    const callback = () => {
      requestAnimationFrame(() => {
        requestAnimationFrame(() => {
          forceUpdate()
        })
      })
    }

    editor.on('transaction', callback)
    return () => {
      editor.off('transaction', callback)
    }
    // eslint-disable-next-line
  }, [editor])
}

export default useEditorForceUpdate
